<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_事件监听</title>
</head>
<body>
    <button onclick="alert('按钮1被点击了！')">按钮1</button>
    <button id="btn2">按钮2</button>
    <hr>
    <h4>今天星期一</h4>
    <span>震惊今天居然是星期一！</span>
    <h4>昨天星期日</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis deserunt impedit iusto minima quasi
            tempora totam voluptates. Beatae commodi cumque doloribus eos, facere, laborum magnam neque reiciendis,
            similique veritatis voluptates.
        </div>
        <div>Accusantium, aliquam assumenda doloribus ea eveniet explicabo molestias natus quaerat similique soluta!
            Debitis eligendi esse est expedita explicabo harum laboriosam laudantium molestias nisi, nobis porro quaerat
            quo repudiandae sint vero.
        </div>
        <div>A amet blanditiis consequuntur dolorum, esse fuga molestiae nulla perspiciatis, sequi sit tempora tenetur
            vero voluptas! Aliquam animi beatae, dolorem eaque, eveniet minus necessitatibus officia quisquam repellat
            sunt ullam, voluptas?
        </div>
        <div>Adipisci aliquid aperiam, corporis delectus deleniti dicta dolores eaque enim error exercitationem fugiat
            id itaque maiores minima minus nam nisi obcaecati odit optio, quaerat quisquam rem suscipit tempore
            temporibus veniam?
        </div>
        <div>Blanditiis cum debitis delectus ea explicabo fugit libero nostrum provident. Autem ducimus eveniet magni
            minus nobis nulla numquam, officiis quibusdam quidem quis, quisquam veniam voluptatibus! Earum
            exercitationem nesciunt perferendis reiciendis.
        </div>
        <div>A accusantium adipisci beatae consectetur culpa, deleniti ea earum, eligendi enim expedita ipsam nam
            necessitatibus nemo perferendis praesentium quam quisquam rem reprehenderit sequi veritatis. Animi fuga in
            officia pariatur quidem.
        </div>
        <div>Alias amet corporis dolor dolore dolores, ducimus eveniet excepturi hic in iusto laboriosam magnam maiores
            molestias mollitia necessitatibus nisi omnis, optio perspiciatis ratione reiciendis repellendus soluta
            veritatis vero voluptate voluptates.
        </div>
        <div>Amet atque aut beatae, corporis debitis deleniti dicta dolorum eligendi eos est illo impedit libero
            molestias odio, omnis perferendis perspiciatis praesentium quae quam qui quidem recusandae rem saepe
            suscipit vel!
        </div>
        <div>Ad dolores, magnam maiores officiis recusandae tempore ullam velit vero. Blanditiis, consequuntur deserunt
            dignissimos earum eum fuga libero minima minus molestiae nemo neque officiis placeat praesentium rerum,
            saepe sunt velit!
        </div>
        <div>Cumque dicta fugit ipsam magni nobis officia provident quas? Consectetur dignissimos explicabo illum
            molestiae natus qui reprehenderit voluptate. A ad dicta earum eveniet iusto laboriosam magnam mollitia totam
            vel voluptas.
        </div>
        <div>A consequatur itaque nemo omnis placeat? At blanditiis corporis facilis fuga laudantium quas quod ratione
            tenetur. Architecto eligendi, in laudantium non provident rem reprehenderit sed suscipit. Dolor harum quas
            quibusdam.
        </div>
        <div>Aperiam dignissimos, doloribus eligendi excepturi in iure, iusto magni minima molestias natus numquam
            perferendis qui vitae! Cupiditate dicta dolorem laborum perspiciatis quos reiciendis sed sequi. Illum
            incidunt, voluptas. Nostrum, perferendis!
        </div>
        <div>Ad aliquam at eaque fugit libero, natus necessitatibus provident quae quaerat saepe! Accusantium architecto
            commodi cumque cupiditate distinctio doloremque error hic modi odio, perferendis possimus, quam reiciendis,
            sed vel vitae!
        </div>
        <div>Adipisci aliquam assumenda beatae dolor dolorum expedita libero magni maiores minus nam non provident qui
            recusandae repudiandae temporibus tenetur, veritatis! Asperiores corporis earum laboriosam temporibus
            voluptatum! Perferendis quasi quidem sit!
        </div>
        <div>Accusamus adipisci aperiam atque beatae deleniti explicabo fugiat hic illum itaque nesciunt quia quos saepe
            similique, sint tempore vel veritatis. Cumque minima natus nemo nesciunt quae! Necessitatibus, perferendis
            vero? Expedita.
        </div>
        <div>Culpa esse excepturi fugit laboriosam laudantium magnam nostrum perspiciatis qui vitae voluptatum. Alias
            error eveniet expedita hic nisi nobis non placeat velit voluptas voluptates! Adipisci alias id quis
            repudiandae. Accusamus?
        </div>
        <div>Accusamus aspernatur culpa debitis distinctio eaque earum est eveniet exercitationem facere hic magnam
            magni maxime, modi nisi officia pariatur praesentium quos repellendus reprehenderit repudiandae saepe
            tempore, temporibus unde vitae voluptas.
        </div>
        <div>Accusamus alias aut beatae dolor ea excepturi iure nulla perferendis, soluta ullam! Amet aperiam commodi
            delectus dignissimos dolor, explicabo harum impedit mollitia odit provident quos saepe tenetur unde vel,
            veniam!
        </div>
        <div>A accusantium adipisci culpa deleniti ex hic illo ipsum iusto magnam, molestias, nam nemo possimus qui sit
            veniam! Assumenda blanditiis esse inventore ipsa nam quae soluta velit vero voluptates voluptatibus.
        </div>
        <div>Accusantium, aperiam dolorum eius excepturi facilis, fugiat harum ipsam minima molestiae nam, nisi officia
            omnis optio placeat sed sint sunt! Accusantium, quod, unde! Cupiditate illum quaerat reprehenderit similique
            soluta voluptatibus!
        </div>
        <div>Earum fugiat ipsa placeat veniam voluptate! Animi aperiam dignissimos ea, facilis hic laudantium maiores
            quo vel voluptatibus. Atque doloribus officiis optio quaerat quo reiciendis repudiandae soluta. Error odio
            velit voluptas.
        </div>
        <div>Ab animi asperiores cupiditate deleniti, dicta dignissimos eius error excepturi explicabo facilis harum id
            impedit iste labore laudantium modi, non officiis quam sint sunt ut vero vitae voluptas voluptate
            voluptates!
        </div>
        <div>Accusantium ad atque consequatur corporis dolorum, ducimus, error excepturi fuga impedit iusto libero
            magnam neque nostrum pariatur praesentium quasi quibusdam quis repellat sed sequi similique sint sit vel
            veniam voluptatibus.
        </div>
        <div>Aspernatur et minus neque nulla veniam. A aliquam, at beatae cum cupiditate doloremque eos ex expedita fuga
            maiores necessitatibus, neque odio provident quasi quia quibusdam similique tenetur ut veniam vitae.
        </div>
        <div>Architecto aut consequatur corporis ducimus eligendi modi nulla odit officia optio, pariatur quidem
            recusandae saepe tenetur unde vel! Assumenda dolores ea eius incidunt ipsam itaque labore molestiae, nisi
            sequi velit!
        </div>
        <div>Ab cupiditate esse eveniet illo laboriosam maxime molestias necessitatibus nobis repellat voluptatibus.
            Aliquid corporis enim est exercitationem maxime obcaecati possimus. Asperiores deserunt dignissimos facere,
            laborum magnam molestias nemo perferendis quam!
        </div>
        <div>Architecto aspernatur commodi culpa, dicta dignissimos eaque est fugit iste maxime minima molestias
            nesciunt quaerat repellendus sequi sit tenetur ullam veniam. Deserunt ipsa numquam odio quisquam
            reprehenderit! Doloremque illum, tenetur!
        </div>
        <div>Ab beatae culpa cumque, deserunt enim inventore, ipsum iste maxime minima molestias nam nihil perspiciatis
            possimus quaerat quam quod recusandae! Commodi deleniti fugit nam necessitatibus nesciunt nulla quas quo
            totam.
        </div>
        <div>Ad id, minima optio temporibus totam unde voluptatem. Accusantium amet beatae cupiditate, earum eos error,
            facere harum hic inventore iusto labore necessitatibus pariatur, perferendis provident quae quo sapiente
            similique voluptatem!
        </div>
        <div>Accusantium adipisci maxime non pariatur quia. Accusantium asperiores beatae, ducimus eius eligendi enim
            fuga ipsam laboriosam laborum maiores molestias, nesciunt optio possimus provident quas quidem quis
            recusandae suscipit velit voluptatibus.
        </div>
        <div>Accusamus aspernatur commodi consequuntur dicta distinctio dolore doloremque ea error ex ipsam laudantium
            libero maxime necessitatibus optio perspiciatis placeat quaerat quidem quis quisquam, quod quos rerum soluta
            temporibus, velit veniam!
        </div>
        <div>A ad adipisci architecto blanditiis doloribus eius error esse ex exercitationem explicabo facilis incidunt
            iste laboriosam libero natus, nemo nihil nulla odio possimus quae quam rerum sint velit veritatis
            voluptatum?
        </div>
        <div>Aspernatur dicta quia soluta ut. Accusantium aliquam aliquid, at commodi dolorem ea fuga molestiae nisi non
            obcaecati odio odit officia pariatur quia quod reprehenderit, rerum tempora vitae. Magni, odio, omnis?
        </div>
        <div>Dicta fugit libero praesentium voluptatum. Animi blanditiis corporis, culpa, deleniti excepturi facilis
            ipsum itaque, labore libero molestiae nemo officia officiis placeat praesentium quae quasi quos repudiandae
            sapiente tempore tenetur ullam.
        </div>
        <div>Ab alias aut non, ratione rerum sapiente sint soluta sunt. Alias est praesentium quis! Accusantium adipisci
            consequatur doloribus iusto natus necessitatibus nobis nostrum provident rem, reprehenderit sint ut
            voluptates voluptatum!
        </div>
        <div>Amet atque commodi eaque hic nisi quia quod saepe tempore. Accusamus doloremque, ducimus ea enim eos
            eveniet ex fuga magnam molestiae mollitia, quibusdam quidem reprehenderit vel vero voluptates. Fugiat,
            mollitia.
        </div>
        <div>A aliquid, aperiam at atque corporis dicta doloremque doloribus ducimus et expedita fuga hic minus natus
            officiis quam quisquam repellat sunt suscipit ut voluptas. Ad aliquam aut facere modi voluptate!
        </div>
        <div>A accusantium amet architecto aspernatur autem blanditiis deleniti distinctio dolore dolorem doloremque
            dolores ea eligendi eveniet excepturi fuga id in iste iusto labore nam quaerat quisquam rem vero voluptates,
            voluptatum!
        </div>
        <div>Adipisci aliquam aspernatur assumenda dignissimos earum eos error expedita magni maiores minima modi
            molestiae, molestias obcaecati praesentium quam quasi quibusdam quidem sint ut voluptas. Beatae molestias
            officiis quod totam voluptatum!
        </div>
        <div>Ad adipisci aperiam corporis cum cupiditate deserunt ducimus eius enim excepturi illo impedit laborum nam
            nobis nulla, obcaecati odio officiis quae quo recusandae, repellat, repudiandae sit sunt tempora veritatis
            voluptatibus.
        </div>
        <div>A aliquam aliquid animi cumque deserunt dolores eos esse est eum eveniet excepturi facere, ipsa laboriosam
            laborum natus nihil placeat porro provident rerum saepe suscipit totam voluptates! A, nobis, sequi?
        </div>
        <div>At autem culpa dignissimos distinctio doloribus ipsam ipsum porro reiciendis temporibus vel. Aperiam
            distinctio ducimus id modi, nostrum sint voluptate? Amet aperiam consectetur deserunt dicta doloremque in
            ipsam quaerat voluptatem.
        </div>
        <div>Animi consequuntur minus pariatur porro possimus quas recusandae sit temporibus voluptas? Aspernatur at
            debitis deserunt eos, est impedit quos reprehenderit, tempora totam ullam veritatis, voluptas. Ad omnis
            provident saepe tempore?
        </div>
        <div>Aliquam architecto aut cupiditate doloremque doloribus exercitationem ipsum mollitia pariatur sapiente
            tenetur. Cupiditate, deleniti dolorem dolores ducimus eveniet excepturi iusto, natus officiis quos
            recusandae reiciendis repudiandae similique sit unde velit.
        </div>
        <div>Architecto, autem dolorem et ex harum incidunt odio perferendis perspiciatis quos velit vitae voluptas
            voluptatibus voluptatum? Alias assumenda error est fugit hic in libero molestiae mollitia officia sed, totam
            veritatis.
        </div>
        <div>Aspernatur beatae commodi cupiditate deleniti hic, iste, labore magni necessitatibus neque nisi possimus
            tenetur voluptate voluptates! Ad aliquam, aperiam autem, beatae deleniti fugiat ipsum necessitatibus nihil
            odio odit porro, rerum.
        </div>
        <div>At exercitationem illum laborum magni natus praesentium rem reprehenderit rerum sed ut! Assumenda harum
            ipsum, maiores molestiae reiciendis rem sequi unde vel vero. Animi distinctio exercitationem nihil, nulla
            placeat quae.
        </div>
        <div>Alias aperiam beatae dignissimos ducimus explicabo molestias, officia quam sequi. Accusantium aut
            blanditiis enim eum excepturi, fuga iusto laboriosam laudantium molestiae nesciunt pariatur possimus qui,
            sed tempora ullam voluptas voluptatem?
        </div>
        <div>Adipisci, architecto delectus, dicta distinctio facere ipsam maiores nam natus nihil, perferendis possimus
            quas quia quisquam repellat rerum totam unde! A aliquam aut fugiat inventore labore possimus quaerat quos
            tenetur.
        </div>
        <div>A aliquam aliquid ex laudantium maxime rem repellat reprehenderit. Exercitationem illo maiores obcaecati
            perferendis porro saepe sit voluptate? Ad aliquid atque dolor illum perferendis vitae voluptates. Beatae
            dicta ipsa sit!
        </div>
    </div>
    <script>
        /* 窗口滚动事件 */
        window.addEventListener('scroll',function (){
            // alert('用户滚动了页面！');
        })
        /* 窗口重置事件 */
        window.addEventListener('resize',function (){
            // alert('用户重置了窗口！');
        })
        /* visibilitychange页面状态改变
        visibilitystete:hidden离开/最小化 visible返回了页面 */
        document.addEventListener('visibilitychange',function (){
            if(document.visibilityState==='hidden'){
                console.log('出来了');
            }else {
                console.log('进去了！');
            }
        })
        //鼠标移入事件 mouseover
        let spanE=document.querySelector('span')
        spanE.addEventListener('mouseover',function (){
            console.log('用户查看了此标题');
        })


        let btn2=document.getElementById('btn2')
        btn2.addEventListener('click',function (){
            // alert('按钮2被点击了！')
        })
    </script>
</body>
</html>